"use client";

import type * as React from "react";

import { type TColumnElement } from "platejs";
import { type PlateElementProps } from "platejs/react";

import { setColumns } from "@platejs/layout";
import { useDebouncePopoverOpen } from "@platejs/layout/react";
import { ResizableProvider } from "@platejs/resizable";
import { type LucideProps, Trash2Icon } from "lucide-react";
import {
  PlateElement,
  useComposedRef,
  useEditorRef,
  useElement,
  useReadOnly,
  useRemoveNodeButton,
  withHOC,
} from "platejs/react";

import { Button } from "@/components/plate/ui/button";
import {
  Popover,
  PopoverAnchor,
  PopoverContent,
} from "@/components/plate/ui/popover";
import { Separator } from "@/components/plate/ui/separator";
import { cn } from "@/lib/utils";

export const ColumnElement = withHOC(
  ResizableProvider,
  function ColumnElement(props: PlateElementProps&lt;TColumnElement&gt;) {
    return (
      <div>
        &lt;PlateElement
          {...props}
          ref={useComposedRef(props.ref)}
          className="h-full px-2 group-first/column:pl-0 group-last/column:pr-0"
        &gt;
          <div>
            {props.children}
          </div>
        &lt;/PlateElement&gt;
      </div>
    );
  },
);

export function ColumnGroupElement(props: PlateElementProps) {
  return (
    &lt;PlateElement className="mb-2" {...props}&gt;
      &lt;ColumnFloatingToolbar&gt;
        <div>{props.children}</div>
      &lt;/ColumnFloatingToolbar&gt;
    &lt;/PlateElement&gt;
  );
}

function ColumnFloatingToolbar({ children }: React.PropsWithChildren) {
  const editor = useEditorRef();
  const readOnly = useReadOnly();
  const element = useElement&lt;TColumnElement&gt;();

  const { props: buttonProps } = useRemoveNodeButton({ element });

  const isOpen = useDebouncePopoverOpen();

  const onColumnChange = (widths: string[]) =&gt; {
    setColumns(editor, {
      at: element,
      widths,
    });
  };

  if (readOnly) return &lt;&gt;{children}&lt;/&gt;;

  return (
    &lt;Popover open={isOpen} modal={false}&gt;
      &lt;PopoverAnchor&gt;{children}&lt;/PopoverAnchor&gt;
      &lt;PopoverContent
        className="w-auto p-1"
        onOpenAutoFocus={(e) =&gt; e.preventDefault()}
        align="center"
        side="top"
        sideOffset={10}
      &gt;
        <div>
          &lt;Button
            variant="ghost"
            className="size-8"
            onClick={() =&gt; onColumnChange(["50%", "50%"])}
          &gt;
            &lt;DoubleColumnOutlined /&gt;
          &lt;/Button&gt;
          &lt;Button
            variant="ghost"
            className="size-8"
            onClick={() =&gt; onColumnChange(["33%", "33%", "33%"])}
          &gt;
            &lt;ThreeColumnOutlined /&gt;
          &lt;/Button&gt;
          &lt;Button
            variant="ghost"
            className="size-8"
            onClick={() =&gt; onColumnChange(["70%", "30%"])}
          &gt;
            &lt;RightSideDoubleColumnOutlined /&gt;
          &lt;/Button&gt;
          &lt;Button
            variant="ghost"
            className="size-8"
            onClick={() =&gt; onColumnChange(["30%", "70%"])}
          &gt;
            &lt;LeftSideDoubleColumnOutlined /&gt;
          &lt;/Button&gt;
          &lt;Button
            variant="ghost"
            className="size-8"
            onClick={() =&gt; onColumnChange(["25%", "50%", "25%"])}
          &gt;
            &lt;DoubleSideDoubleColumnOutlined /&gt;
          &lt;/Button&gt;

          &lt;Separator orientation="vertical" className="mx-1 h-6" /&gt;
          &lt;Button variant="ghost" className="size-8" {...buttonProps}&gt;
            &lt;Trash2Icon /&gt;
          &lt;/Button&gt;
        </div>
      &lt;/PopoverContent&gt;
    &lt;/Popover&gt;
  );
}

const DoubleColumnOutlined = (props: LucideProps) =&gt; (
  &lt;svg
    fill="none"
    height="16"
    viewBox="0 0 16 16"
    width="16"
    xmlns="http://www.w3.org/2000/svg"
    {...props}
  &gt;
    &lt;path
      clipRule="evenodd"
      d="M8.5 3H13V13H8.5V3ZM7.5 2H8.5H13C13.5523 2 14 2.44772 14 3V13C14 13.5523 13.5523 14 13 14H8.5H7.5H3C2.44772 14 2 13.5523 2 13V3C2 2.44772 2.44772 2 3 2H7.5ZM7.5 13H3L3 3H7.5V13Z"
      fill="currentColor"
      fillRule="evenodd"
    /&gt;
  &lt;/svg&gt;
);

const ThreeColumnOutlined = (props: LucideProps) =&gt; (
  &lt;svg
    fill="none"
    height="16"
    viewBox="0 0 16 16"
    width="16"
    xmlns="http://www.w3.org/2000/svg"
    {...props}
  &gt;
    &lt;path
      clipRule="evenodd"
      d="M9.25 3H6.75V13H9.25V3ZM9.25 2H6.75H5.75H3C2.44772 2 2 2.44772 2 3V13C2 13.5523 2.44772 14 3 14H5.75H6.75H9.25H10.25H13C13.5523 14 14 13.5523 14 13V3C14 2.44772 13.5523 2 13 2H10.25H9.25ZM10.25 3V13H13V3H10.25ZM3 13H5.75V3H3L3 13Z"
      fill="currentColor"
      fillRule="evenodd"
    /&gt;
  &lt;/svg&gt;
);

const RightSideDoubleColumnOutlined = (props: LucideProps) =&gt; (
  &lt;svg
    fill="none"
    height="16"
    viewBox="0 0 16 16"
    width="16"
    xmlns="http://www.w3.org/2000/svg"
    {...props}
  &gt;
    &lt;path
      clipRule="evenodd"
      d="M11.25 3H13V13H11.25V3ZM10.25 2H11.25H13C13.5523 2 14 2.44772 14 3V13C14 13.5523 13.5523 14 13 14H11.25H10.25H3C2.44772 14 2 13.5523 2 13V3C2 2.44772 2.44772 2 3 2H10.25ZM10.25 13H3L3 3H10.25V13Z"
      fill="currentColor"
      fillRule="evenodd"
    /&gt;
  &lt;/svg&gt;
);

const LeftSideDoubleColumnOutlined = (props: LucideProps) =&gt; (
  &lt;svg
    fill="none"
    height="16"
    viewBox="0 0 16 16"
    width="16"
    xmlns="http://www.w3.org/2000/svg"
    {...props}
  &gt;
    &lt;path
      clipRule="evenodd"
      d="M5.75 3H13V13H5.75V3ZM4.75 2H5.75H13C13.5523 2 14 2.44772 14 3V13C14 13.5523 13.5523 14 13 14H5.75H4.75H3C2.44772 14 2 13.5523 2 13V3C2 2.44772 2.44772 2 3 2H4.75ZM4.75 13H3L3 3H4.75V13Z"
      fill="currentColor"
      fillRule="evenodd"
    /&gt;
  &lt;/svg&gt;
);

const DoubleSideDoubleColumnOutlined = (props: LucideProps) =&gt; (
  &lt;svg
    fill="none"
    height="16"
    viewBox="0 0 16 16"
    width="16"
    xmlns="http://www.w3.org/2000/svg"
    {...props}
  &gt;
    &lt;path
      clipRule="evenodd"
      d="M10.25 3H5.75V13H10.25V3ZM10.25 2H5.75H4.75H3C2.44772 2 2 2.44772 2 3V13C2 13.5523 2.44772 14 3 14H4.75H5.75H10.25H11.25H13C13.5523 14 14 13.5523 14 13V3C14 2.44772 13.5523 2 13 2H11.25H10.25ZM11.25 3V13H13V3H11.25ZM3 13H4.75V3H3L3 13Z"
      fill="currentColor"
      fillRule="evenodd"
    /&gt;
  &lt;/svg&gt;
);
